@define-mixin clear-form-element {
  border: 0;
  background-color: transparent;
  font-size: inherit;
  appearance: none;
  all: unset;
  box-sizing: border-box;
  cursor: default;
}

@define-mixin drop-shadow-sm {
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.2));
}

@define-mixin nested-editor-toolbar {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  gap: var(--spacing-1);
  padding: var(--spacing-1);
  z-index: 1;
  background-color: var(--baseBase);
  border-bottom-left-radius: var(--radius-base);
}

@define-mixin icon-button {
  @mixin clear-form-element;
  padding: var(--spacing-1);
  color: var(--baseTextContrast);

  & svg {
    display: block;
  }

  @media (hover: hover) {
    &:hover {
      background-color: var(--baseBg);
    }
  }

  &:active svg {
    transform: translate(1px, 1px);
  }

  &[data-state='on'],
  &:active {
    background-color: var(--baseBg);
    color: var(--baseTextContrast);
  }
}

.editorRoot {
  --accentBase: var(--blue-1);
  --accentBgSubtle: var(--blue-2);
  --accentBg: var(--blue-3);
  --accentBgHover: var(--blue-4);
  --accentBgActive: var(--blue-5);
  --accentLine: var(--blue-6);
  --accentBorder: var(--blue-7);
  --accentBorderHover: var(--blue-8);
  --accentSolid: var(--blue-9);
  --accentSolidHover: var(--blue-10);
  --accentText: var(--blue-11);
  --accentTextContrast: var(--blue-12);

  --basePageBg: white;
  --baseBase: var(--slate-1);
  --baseBgSubtle: var(--slate-2);
  --baseBg: var(--slate-3);
  --baseBgHover: var(--slate-4);
  --baseBgActive: var(--slate-5);
  --baseLine: var(--slate-6);
  --baseBorder: var(--slate-7);
  --baseBorderHover: var(--slate-8);
  --baseSolid: var(--slate-9);
  --baseSolidHover: var(--slate-10);
  --baseText: var(--slate-11);
  --baseTextContrast: var(--slate-12);

  --admonitionTipBg: var(--cyan-4);
  --admonitionTipBorder: var(--cyan-8);

  --admonitionInfoBg: var(--grass-4);
  --admonitionInfoBorder: var(--grass-8);

  --admonitionCautionBg: var(--amber-4);
  --admonitionCautionBorder: var(--amber-8);

  --admonitionDangerBg: var(--red-4);
  --admonitionDangerBorder: var(--red-8);

  --admonitionNoteBg: var(--slate-4);
  --admonitionNoteBorder: var(--slate-8);

  --error-color: var(--red-10);

  --spacing-0: 0px;
  --spacing-px: 1px;
  --spacing-0_5: 0.125rem;
  --spacing-1: 0.25rem;
  --spacing-1_5: 0.375rem;
  --spacing-2: 0.5rem;
  --spacing-2_5: 0.625rem;
  --spacing-3: 0.75rem;
  --spacing-3_5: 0.875rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-7: 1.75rem;
  --spacing-8: 2rem;
  --spacing-9: 2.25rem;
  --spacing-10: 2.5rem;
  --spacing-11: 2.75rem;
  --spacing-12: 3rem;
  --spacing-14: 3.5rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  --spacing-28: 7rem;
  --spacing-32: 8rem;
  --spacing-36: 9rem;
  --spacing-40: 10rem;
  --spacing-44: 11rem;
  --spacing-48: 12rem;
  --spacing-52: 13rem;
  --spacing-56: 14rem;
  --spacing-60: 15rem;
  --spacing-64: 16rem;
  --spacing-72: 18rem;
  --spacing-80: 20rem;
  --spacing-96: 24rem;

  --radius-none: 0px;
  --radius-small: var(--spacing-0_5);
  --radius-base: var(--spacing-1);
  --radius-medium: var(--spacing-1_5);
  --radius-large: var(--spacing-2);
  --radius-extra-large: var(--spacing-3);
  --radius-full: 9999px;

  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
    sans-serif;

  --text-base: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;
  --text-xxs: 0.6rem;

  font-family: var(--font-body);
  color: var(--baseText);
}

.editorWrapper {
}

.nestedListItem {
  list-style: none;
}

.toolbarRoot {
  z-index: 2;
  display: flex;
  flex-direction: row;
  gap: var(--spacing-1);
  border-radius: var(--radius-medium);
  padding: var(--spacing-1_5);
  align-items: center;
  overflow-x: auto;
  position: sticky;
  top: 0;
  background-color: var(--baseBg);
  width: inherit;

  & div[role='separator'] {
    margin: var(--spacing-2) var(--spacing-1);
    border-left: 1px solid var(--baseBorder);
    border-right: 1px solid var(--baseBase);
    height: var(--spacing-4);
  }

  & svg {
    color: var(--baseTextContrast);
    display: block;
  }
}

.readOnlyToolbarRoot {
  pointer-events: none;
  background: var(--baseBase);

  & > div {
    opacity: 0.5;
  }
}

.toolbarModeSwitch {
  opacity: 1 !important;
  margin-left: auto;
  align-self: stretch;
  align-items: stretch;
  display: flex;
  border: 1px solid var(--baseBg);
  border-radius: var(--radius-medium);
  font-size: var(--text-xs);

  .toolbarToggleItem {
    padding-inline-end: var(--spacing-4);
    padding-inline-start: var(--spacing-4);

    &:active,
    &[data-state='on'] {
      background-color: var(--baseBorder);
    }
  }
}

.toolbarGroupOfGroups {
  display: flex;
  margin: 0 var(--spacing-1);
}

.toolbarToggleSingleGroup:first-of-type .toolbarToggleItem:only-child,
.toolbarToggleSingleGroup:only-child .toolbarToggleItem:first-child,
.toolbarModeSwitch .toolbarToggleItem:first-child {
  border-top-left-radius: var(--radius-base);
  border-bottom-left-radius: var(--radius-base);
}

.toolbarToggleSingleGroup:last-of-type .toolbarToggleItem:only-child,
.toolbarToggleSingleGroup:only-child .toolbarToggleItem:last-child,
.toolbarModeSwitch .toolbarToggleItem:last-child {
  border-top-right-radius: var(--radius-base);
  border-bottom-right-radius: var(--radius-base);
}

.toolbarToggleItem,
.toolbarButton {
  @mixin clear-form-element;
  padding: var(--spacing-0_5);

  @media (hover: hover) {
    &:hover {
      background-color: var(--baseBgActive);
    }
  }

  &:active svg {
    transform: translate(1px, 1px);
  }

  &[data-state='on'],
  &:active {
    color: var(--baseTextContrast);
    background-color: var(--baseBgActive);
  }

  &[data-disabled] {
    pointer-events: none;
    & svg {
      color: var(--baseBorderHover);
    }
  }
}

.toolbarButton {
  border-radius: var(--radius-base);
}

.toolbarButton + .toolbarButton {
  margin-left: var(--spacing-1);
}

.activeToolbarButton {
  color: var(--accentText);
}

.toolbarToggleSingleGroup {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.toolbarNodeKindSelectContainer,
.toolbarButtonDropdownContainer,
.toolbarCodeBlockLanguageSelectContent,
.selectContainer {
  @mixin drop-shadow-sm;
  z-index: 3;
  width: var(--spacing-36);
  border-bottom-left-radius: var(--radius-base);
  border-bottom-right-radius: var(--radius-base);
  background-color: var(--basePageBg);
  font-size: var(--text-sm);
}

.toolbarButtonDropdownContainer {
  border-top-right-radius: var(--radius-base);

  & .selectItem:first-child {
    border-top-right-radius: var(--radius-base);
  }
}

.toolbarNodeKindSelectTrigger,
.toolbarButtonSelectTrigger,
.selectTrigger {
  border: 0;
  background-color: transparent;
  display: flex;
  color: inherit;
  align-items: center;
  width: var(--spacing-36);
  padding: var(--spacing-0_5) var(--spacing-1);
  padding-inline-start: var(--spacing-2);
  border-radius: var(--radius-medium);
  white-space: nowrap;
  flex-wrap: nowrap;
  font-size: var(--text-sm);
  background-color: var(--basePageBg);
  margin: 0 var(--spacing-1);

  &[data-state='open'] {
    @mixin drop-shadow-sm;
    border-bottom-right-radius: var(--radius-none);
    border-bottom-left-radius: var(--radius-none);
  }
}

.selectTrigger[data-placeholder] > span:first-child {
  color: var(--baseBorderHover);
}

/** used in the sandpack */
.toolbarButtonSelectTrigger {
  width: auto;
  padding-inline-start: var(--spacing-2);
  padding-inline-end: var(--spacing-1);
  padding-block: var(--spacing-0_5);
}

.toolbarCodeBlockLanguageSelectTrigger,
.toolbarCodeBlockLanguageSelectContent {
  width: var(--spacing-48);
}

.toolbarNodeKindSelectItem,
.selectItem {
  cursor: default;
  display: flex;
  padding: var(--spacing-2);

  &[data-highlighted] {
    background-color: var(--baseBg);
  }

  &[data-state='checked'] {
    color: var(--baseTextContrast);
    background-color: var(--baseBg);
  }

  &[data-highlighted] {
    outline: none;
  }

  &:last-child {
    border-bottom-left-radius: var(--radius-base);
    border-bottom-right-radius: var(--radius-base);
  }
}

.toolbarNodeKindSelectDropdownArrow,
.selectDropdownArrow {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.contentEditable {
  box-sizing: border-box;
  width: 100%;
  color: var(--baseTextContrast);

  &:focus {
    outline: none;
  }

  padding: var(--spacing-3);
}

.codeMirrorWrapper {
  margin-bottom: var(--spacing-5);
  border: 1px solid var(--baseLine);
  border-radius: var(--radius-medium);
  overflow: hidden;
  padding: 0.8rem;
  position: relative;
}

.sandPackWrapper {
  margin-bottom: var(--spacing-5);
  border: 1px solid var(--baseLine);
  border-radius: var(--radius-medium);
  overflow: hidden;
  position: relative;
}

.codeMirrorToolbar {
  @mixin nested-editor-toolbar;
}

.frontmatterWrapper {
  border-radius: var(--radius-medium);
  padding: var(--spacing-3);
  background-color: var(--baseBgSubtle);

  &[data-expanded='true'] {
    margin-bottom: var(--spacing-10);
  }
}

.frontmatterToggleButton {
  @mixin clear-form-element;
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--text-sm);
}

.propertyPanelTitle {
  font-size: var(--text-xs);
  font-weight: 400;
  margin: 0;
  padding-top: var(--spacing-2);
  padding-left: var(--spacing-2);
}

.propertyEditorTable {
  table-layout: fixed;
  border-spacing: var(--spacing-2);

  & th {
    text-align: left;
    font-size: var(--text-sm);
    padding: var(--spacing-2) var(--spacing-3);
  }

  & col:nth-child(1) {
    width: 30%;
  }

  & col:nth-child(2) {
    width: 70%;
  }

  & td:last-child .iconButton {
    margin-left: var(--spacing-4);
    margin-right: var(--spacing-4);
  }

  & .readOnlyColumnCell {
    padding-left: 0;
  }
}

.propertyEditorLabelCell {
  font-weight: 400;
}

.readOnlyColumnCell {
  padding-left: 0;
}

.buttonsFooter {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-2);
}

.propertyEditorInput {
  @mixin clear-form-element;
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-base);
  border: 1px solid var(--baseBorder);
  background-color: var(--baseBase);
  font-size: var(--text-sm);
}

.iconButton {
  @mixin clear-form-element;
  color: var(--baseText);

  @media (hover: hover) {
    &:hover {
      color: var(--baseTextContrast);
    }
  }

  &:disabled,
  &:disabled:hover {
    color: var(--baseLine);
  }
}

.primaryButton,
.secondaryButton {
  @mixin clear-form-element;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--accentBorder);
  background-color: var(--accentSolidHover);
  color: var(--baseBase);
  font-size: var(--text-xs);
  border-radius: var(--radius-medium);

  &:disabled {
    background: var(--accentLine);
    border-color: var(--accentBg);
  }
}

.smallButton {
  font-size: var(--text-xs);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-base);
}

.secondaryButton {
  border: 1px solid var(--baseBorder);
  background-color: var(--baseSolidHover);
  color: var(--baseBase);
}

.dialogForm {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-2);
}

.linkDialogEditForm {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-2);
  padding: 0;
}

.linkDialogInputContainer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.linkDialogInputWrapper {
  display: flex;
  align-items: center;
  background-color: var(--baseBase);

  border-radius: var(--radius-base);
  border: 1px solid var(--baseBorder);

  &[data-visible-dropdown='true'] {
    border-bottom-left-radius: var(--radius-none);
    border-bottom-right-radius: var(--radius-none);
    border-bottom-width: 0;
  }

  & > button {
    @mixin clear-form-element;
    padding-right: var(--spacing-2);
  }
}

.linkDialogInput,
.dialogInput {
  @mixin clear-form-element;
  width: 20rem;
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--text-sm);

  &::placeholder {
    color: var(--baseBorder);
  }
}

.linkDialogAnchor {
  position: fixed;
  background-color: highlight;
  z-index: -1;

  &[data-visible='true'] {
    visibility: visible;
  }

  &[data-visible='false'] {
    visibility: hidden;
  }
}

.linkDialogPopoverContent,
.tableColumnEditorPopoverContent,
.dialogContent {
  @mixin drop-shadow-sm;
  display: flex;
  align-items: center;
  gap: var(--spacing-0_5);
  border-radius: var(--radius-medium);
  border: 1px solid var(--baseBg);
  background-color: var(--basePageBg);
  padding: var(--spacing-1) var(--spacing-1);
  font-size: var(--text-sm);
}

.largeDialogContent {
  @mixin drop-shadow-sm;
  gap: var(--spacing-0_5);
  border-radius: var(--radius-medium);
  border: 1px solid var(--baseBorder);
  background-color: var(--baseBgSubtle);
  padding: var(--spacing-4);
  font-size: var(--text-sm);
}

.dialogTitle {
  font-size: var(--text-base);
  font-weight: 600;
  padding-left: var(--spacing-2);
}

.dialogCloseButton {
  @mixin clear-form-element;
  position: absolute;
  top: 10px;
  right: 10px;
}

.popoverContent {
  @mixin drop-shadow-sm;
  display: flex;
  align-items: center;
  gap: var(--spacing-0_5);
  border-radius: var(--radius-medium);
  background-color: var(--baseBgSubtle);
  padding: var(--spacing-2) var(--spacing-2);
  font-size: var(--text-sm);
  z-index: 1;
}

.popoverArrow {
  fill: var(--basePageBg);
}

.linkDialogPreviewAnchor {
  margin-right: var(--spacing-1);
  display: flex;
  align-items: center;
  color: var(--accentText);
  text-decoration: none;

  @media (hover: hover) {
    &:hover {
      color: var(--accentSolidHover);
    }
  }

  border: 1px solid transparent;

  & span {
    max-width: 14rem;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.tooltipTrigger {
  align-self: center;
}

.tooltipContent {
  z-index: 2;
  position: relative;
  border-radius: var(--radius-medium);
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--text-xs);
  background-color: var(--baseText);
  color: var(--baseBase);

  & svg {
    fill: var(--baseText);
  }
}

.actionButton {
  @mixin icon-button;
  padding: var(--spacing-1) var(--spacing-1);
  border-radius: var(--radius-medium);
  color: var(--baseTextContrast);
}

.primaryActionButton {
  background-color: var(--accentSolid);
  color: var(--baseBase);

  @media (hover: hover) {
    &:hover {
      background-color: var(--accentSolidHover);
      color: var(--baseBase);
    }
  }
}

.tableEditor {
  table-layout: fixed;
  width: 100%;
  height: 100%;
  border-spacing: 0;
  border-collapse: collapse;

  & thead > tr > th {
    text-align: right;
  }

  & > tbody > tr > td:not(.toolCell),
  & > tbody > tr > th:not(.toolCell):not([data-tool-cell='true']) {
    border: 1px solid var(--baseBgActive);
    padding: var(--spacing-1) var(--spacing-2);
    white-space: normal;

    & > div {
      outline: none;

      & > p {
        margin: 0;
      }
    }

    &[data-active='true'] {
      outline: solid 1px var(--baseSolid);
    }
  }

  .tableColumnEditorTrigger,
  .tableRowEditorTrigger,
  .addRowButton,
  .addColumnButton,
  .iconButton {
    opacity: 0.15;
  }

  @media (hover: hover) {
    &:hover {
      .tableColumnEditorTrigger,
      .tableRowEditorTrigger,
      .addRowButton,
      .addColumnButton,
      .iconButton {
        opacity: 0.3;

        &:hover {
          opacity: 1;
        }
      }
    }
  }
}

.toolCell {
  text-align: right;

  & button {
    margin: auto;
    display: block;
  }
}

.tableColumnEditorTrigger {
  @mixin icon-button;
  padding: var(--spacing-1);
  border-radius: var(--radius-full);
  opacity: 0.2;

  &[data-active='true'] {
    opacity: 1 !important;
  }
}

.tableColumnEditorToolbar {
  display: flex;

  & > button {
    @mixin icon-button;
  }

  & [role='separator'] {
    margin-left: var(--spacing-1);
    margin-right: var(--spacing-1);
  }
}

.toggleGroupRoot {
  display: inline-flex;

  & button {
    @mixin icon-button;

    &:first-child {
      border-top-left-radius: var(--radius-base);
      border-bottom-left-radius: var(--radius-base);
    }

    &:last-child {
      border-top-right-radius: var(--radius-base);
      border-bottom-right-radius: var(--radius-base);
    }
  }
}

.tableToolsColumn {
  width: 2rem;

  & button {
    margin: auto;
    display: block;
  }
}

.leftAlignedCell {
  text-align: left;
}

.rightAlignedCell {
  text-align: right;
}

.centeredCell {
  text-align: center;
}

.addColumnButton,
.addRowButton {
  @mixin icon-button;
  background-color: var(--baseBase);

  & svg {
    margin: auto;
  }

  display: flex;
  align-items: center;
}

.addRowButton {
  width: 100%;
  margin-top: var(--spacing-px);
  box-sizing: border-box;
  border-bottom-right-radius: var(--radius-medium);
  border-bottom-left-radius: var(--radius-medium);
}

.addColumnButton {
  margin-left: var(--spacing-px);
  height: 100%;
  border-top-right-radius: var(--radius-medium);
  border-bottom-right-radius: var(--radius-medium);
}

/** Dialog */
.dialogOverlay {
  position: fixed;
  inset: 0;
  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
  background-color: var(--baseBase);
  z-index: 51;
  opacity: 0.5;
}

.dialogContent,
.largeDialogContent {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 52;
}

.dialogContent:focus,
.largeDialogContent:focus {
  outline: none;
}

@keyframes overlayShow {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.5;
  }
}

@keyframes contentShow {
  from {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.focusedImage {
  outline: highlight solid 2px;
}

.imageWrapper {
  display: inline-block;
  position: relative;
}

.imageWrapper[draggable='true'] {
  cursor: move;
  /* fallback if grab cursor is unsupported */
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

.editImageToolbar {
  @mixin nested-editor-toolbar;
}

.editImageButton {
  & svg {
    display: block;
  }
}

.inlineEditor {
  display: inline-flex;
  border-radius: var(--radius-medium);
  padding: var(--spacing-1);
  gap: var(--spacing-2);
  align-items: center;
  background: var(--baseBg);
}

.blockEditor {
  display: flex;
  justify-content: stretch;
  border-radius: var(--radius-medium);
  padding: var(--spacing-2);
  gap: var(--spacing-2);
  align-items: center;
  background: var(--baseBg);

  & .nestedEditor {
    flex-grow: 1;
  }
}

.nestedEditor {
  background: var(--basePageBg);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-medium);

  & > p {
    margin: 0;
  }

  &:focus {
    outline: none;
  }
}

.genericComponentName {
  font-size: var(--text-sm);
  color: var(--baseText);
  padding-right: var(--spacing-2);
}

.diffSourceToggleWrapper {
  margin-left: auto;
  pointer-events: auto;
  opacity: 1;
  position: sticky;
  right: 0;
}

.ggDiffSourceToggle {
}

.diffSourceToggle {
  border-radius: var(--radius-medium);
  background-color: var(--baseBase);
  display: flex;

  .toolbarToggleItem {
    padding: 0;

    & > span {
      display: block;
      padding: var(--spacing-1) var(--spacing-1);
    }
  }
}

.selectWithLabel {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-left: var(--spacing-2);

  & > label {
    font-size: var(--text-sm);
  }

  .selectTrigger {
    border: 1px solid var(--baseBorder);
  }
}

.toolbarTitleMode {
  font-size: var(--text-sm);
  margin-left: var(--spacing-2);
}

.imageControlWrapperResizing {
  touch-action: none;
}

.imageResizer {
  display: block;
  width: 7px;
  height: 7px;
  position: absolute;
  background-color: var(--accentText);
  border: 1px solid var(--baseBg);
}

.imageResizer.imageResizerN {
  top: -6px;
  left: 48%;
  cursor: n-resize;
}

.imageResizer.imageResizerNe {
  top: -6px;
  right: -6px;
  cursor: ne-resize;
}

.imageResizer.imageResizerE {
  bottom: 48%;
  right: -6px;
  cursor: e-resize;
}

.imageResizer.imageResizerSe {
  bottom: -2px;
  right: -6px;
  cursor: nwse-resize;
}

.imageResizer.imageResizerS {
  bottom: -2px;
  left: 48%;
  cursor: s-resize;
}

.imageResizer.imageResizerSw {
  bottom: -2px;
  left: -6px;
  cursor: sw-resize;
}

.imageResizer.imageResizerW {
  bottom: 48%;
  left: -6px;
  cursor: w-resize;
}

.imageResizer.imageResizerNw {
  top: -6px;
  left: -6px;
  cursor: nw-resize;
}

.imagePlaceholder {
  border: 2px dashed;
  padding: 48px;
  margin: 12px;
  width: fit-content;
  height: fit-content;
}

.imageDimensionsContainer {
  display: flex;
  gap: var(--spacing-4);
}

.placeholder {
  color: var(--baseSolid);
  overflow: hidden;
  position: absolute;
  top: 0;
  padding: var(--spacing-3);
  text-overflow: ellipsis;
  user-select: none;
  white-space: nowrap;
  display: inline-block;
  pointer-events: none;
}

.rootContentEditableWrapper {
  position: relative;
}

.downshiftContainer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.downshiftInputWrapper {
  display: flex;
  align-items: center;
  background-color: var(--baseBase);

  border-radius: var(--radius-base);
  border: 1px solid var(--baseBorder);

  &[data-visible-dropdown='true'] {
    border-bottom-left-radius: var(--radius-none);
    border-bottom-right-radius: var(--radius-none);
    border-bottom-width: 0;
  }

  & > button {
    @mixin clear-form-element;
    padding-right: var(--spacing-2);
  }
}

.downshiftInput {
  @mixin clear-form-element;
  width: 20rem;
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--text-sm);

  &::placeholder {
    color: var(--baseBorder);
  }
}

.downshiftAutocompleteContainer {
  position: relative;

  & ul {
    all: unset;
    box-sizing: border-box;
    position: absolute;
    font-size: var(--text-sm);
    width: 100%;
    display: none;
    border-bottom-left-radius: var(--radius-medium);
    border-bottom-right-radius: var(--radius-medium);
    max-height: var(--spacing-48);
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid var(--baseBorder);
    border-top-width: 0;
    background-color: var(--baseBase);

    &[data-visible='true'] {
      display: block;
    }

    & li {
      padding: var(--spacing-2) var(--spacing-3);
      white-space: nowrap;
      margin-bottom: var(--spacing-1);
      overflow-x: hidden;
      text-overflow: ellipsis;

      &[data-selected='true'] {
        background-color: var(--baseBgSubtle);
      }

      &[data-highlighted='true'] {
        background-color: var(--baseBgHover);
      }

      &:last-of-type {
        border-bottom-left-radius: var(--radius-medium);
        border-bottom-right-radius: var(--radius-medium);
      }
    }
  }
}

.textInput {
  all: unset;
  border-radius: var(--radius-base);
  border: 1px solid var(--baseBorder);
  background-color: var(--baseBase);
  padding: var(--spacing-2) var(--spacing-3);
}

form.multiFieldForm {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-2);
  gap: var(--spacing-2);

  .formField {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);

    & label {
      font-size: var(--text-xs);
    }
  }
}

.markdownParseError {
  border-radius: var(--radius-base);
  border: 1px solid var(--error-color);
  padding: var(--spacing-2);
  margin-block: var(--spacing-2);
  color: var(--error-color);
  font-size: var(--text-xs);
}

.popupContainer {
  position: relative;
  z-index: 2;
}

.inputSizer {
  display: inline-grid;
  vertical-align: baseline;
  align-items: center;
  position: relative;

  &::after,
  & input {
    width: auto;
    min-width: 1rem;
    grid-area: 1 / 2;
    font: inherit;
    margin: 0;
    padding: 0 2px;
    resize: none;
    background: none;
    appearance: none;
    border: none;
    color: inherit;
  }

  span {
    padding: 0.25em;
  }

  &::after {
    content: attr(data-value);
    white-space: pre-wrap;
  }
}
